<template>
	<div class="home-guide">
		<div class="banner-img"><img src="../../../assets/images/banner1.png" alt="标语图片" /></div>
		<div class="guide-content maxW">
			<el-row class="tac" :gutter="20">
				<!-- left -->
				<el-col :span="5">
					<el-menu :default-active="guideType + '-1'" class="el-menu-vertical-demo guide-menu" @select="selectMenu">
						<el-submenu index="1">
							<template slot="title">
								<span>操作手册</span>
							</template>
							<el-menu-item-group>
								<template v-for="(item, index) of operationData">
									<el-menu-item :index="'1-' + (index + 1)" :key="index" @click="checkOperation(item)">{{ item.title }}</el-menu-item>
								</template>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="2">
							<template slot="title">
								<span>常见问题</span>
							</template>
							<el-menu-item-group>
								<template v-for="(item, index) of problemData">
									<el-menu-item :index="'2-' + (index + 1)" :key="index" @click="checkProblem(item.id)">{{ item.name }}</el-menu-item>
								</template>
							</el-menu-item-group>
						</el-submenu>

						<el-submenu index="3">
							<template slot="title">
								<span>用户反馈</span>
							</template>
							<el-menu-item-group><el-menu-item index="3-1">填写反馈</el-menu-item></el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-col>
				<!-- right -->
				<el-col :span="19">
					<div class="guide-right">
						<!-- operation -->
						<template v-if="memuActive == '1'">
							<div class="download-banner clear">
								<span class="download-title fl">
									<i class="type-icon"></i>
									<i class="document-name">{{ documentData.title }}.{{ documentData.postfix }}</i>
								</span>
								<el-button class="fr" type="primary" @click="downLoad(documentData)">下载</el-button>
							</div>
							<div class="document-file">
								<div class="file-title">
									<h2>{{ documentData.title }}</h2>
									<i class="full-screen-icon" v-if="documentData.pdf_path != ''" @click="dialogVisible = true"></i>
								</div>
								<div class="file-box">
									<template v-if="documentData.pdf_path == ''">
										<img src="../../../../public/images/image08.png" alt="没有文档" />
									</template>
									<template v-else>
										<iframe :src="BASE_URL + documentData.pdf_path" width="100%" height="100%" style="min-height:800px"></iframe>
									</template>
								</div>
							</div>
						</template>
						<!-- problem -->
						<template v-if="memuActive == '2' && listFlag == false">
							<div class="download-banner clear">
								<span class="download-title fl">
									<i class="problem-icon"></i>
									<i class="document-name">常见问题</i>
								</span>
								<el-input placeholder="搜索" class="search-input fr" v-model="problem" @keyup.enter.native="searchProblem">
									<i slot="suffix" class="el-input__icon el-icon-search" @click="searchProblem"></i>
								</el-input>
							</div>
							<div class="problem-box">
								<ul v-if="singleProblem.length > 0">
									<li class="problem-li clear" v-for="(item, index) of singleProblem" :key="index" @click="clickProblemList(item)">
										<span class="fl problem-title">{{ item.title }}</span>
										<i class="fr el-icon-arrow-right"></i>
									</li>
								</ul>
								<div v-else class="no-data-tips">- 暂无数据 -</div>
							</div>
							<el-pagination
								v-if="total_number > page_size"
								@current-change="change_page"
								:page-size="page_size"
								:current-page="page_index"
								layout="total,prev, pager, next,jumper"
								:total="total_number"
							></el-pagination>
						</template>
						<template v-if="memuActive == '2' && listFlag == true">
							<div class="download-banner">
								<span class="download-title" @click="listFlag = false">
									<i class="back-icon"></i>
									<i class="document-name">返回</i>
								</span>
							</div>
							<div class="problem-box">
								<h3>{{ problemListData.title }}</h3>
								<div v-html="problemListData.content"></div>
							</div>
						</template>
						<!-- feedback -->
						<template v-if="memuActive == '3'">
							<div class="download-banner">
								<span class="download-title">
									<i class="feak-icon"></i>
									<i class="document-name">问题反馈</i>
								</span>
							</div>
							<div class="feedback-content">
								<el-form ref="feedbackForm" :model="feedbackForm" label-width="100px" label-position="left">
									<p class="form-tips">请在下方填写您在使用过程中遇到的问题，我们将仔细阅读您的反馈！</p>
									<div class="textarea-item">
										<div class="upload-box clear">
											<imgUpload class="fr" v-on:picture="getImgPath"></imgUpload>
											<span class="fr pic-name">{{ picName }}</span>
										</div>
										<div class="textarea-box">
											<el-input
												type="textarea"
												resize="none"
												placeholder="请尽可能详细地描述您遇到的问题，您的反馈将是我们提升平台质量的最好保证"
												v-model.trim="feedbackForm.content"
												maxlength="140"
												show-word-limit
											></el-input>
										</div>
									</div>
									<el-form-item label="问题类型:">
										<el-select v-model="feedbackForm.type_id" placeholder="请选择问题类型">
											<el-option v-for="item in feedbackType" :key="item.id" :label="item.name" :value="item.id"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="你的邮箱:" class="email-item">
										<el-input v-model.trim="feedbackForm.email" placeholder="方便我们更快地联系到你"></el-input>
									</el-form-item>
									<el-form-item label="验证码:" class="code-item">
										<el-input v-model.trim="feedbackCode" placeholder="输入右侧四位字符"></el-input>
										<div class="identify-code" @click="refreshCode">
											<!--验证码组件-->
											<identify :identifyCode="identifyCode" title="看不清，再换一张" />
										</div>
									</el-form-item>
									<el-form-item class="submit-item"><el-button type="primary" @click="submit">确定</el-button></el-form-item>
								</el-form>
							</div>
						</template>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-dialog class="opertaion-dialog" :title="documentData.title" :center="true" :visible.sync="dialogVisible" :fullscreen="true">
			<iframe :src="BASE_URL + documentData.pdf_path" width="100%" height="100%"></iframe>
		</el-dialog>
	</div>
</template>
<script>
import imgUpload from './imgUpload'; //图片上传组件
import identify from './identify'; //验证码组件

export default {
	components: {
		imgUpload,
		identify
	},
	data() {
		return {
			memuActive: '' + this.$route.query.type,
			guideType: this.$route.query.type, //跳转到当前页面的参数，1：操作手册，2：常见问题，3：意见反馈
			operationData: [], //操作手册的数据
			dialogVisible: false, //操作手册全屏弹窗
			documentData: '', //单个文件数据
			problemData: [], //常见问题的数据
			problemCount: 0, //常见问题总数
			singleProblem: [], //单个问题数据
			problemId: null, //当前点击选中的问题id
			//分页
			page_index: 1,
			page_size: 15,
			total_number: 0,
			problem: '', //搜索问题关键字
			listFlag: false, //问题详情是否显示
			problemListData: {}, //问题详情
			//用户反馈表单
			feedbackForm: {
				picture: '', //图片
				content: '', //反馈的问题内容
				type_id: '', //选中的问题类型
				email: '', //邮箱
				create_id: 0
			},
			//表单默认值用于重置
			defaultForm: {
				picture: '', //图片
				content: '', //反馈的问题内容
				type_id: '', //选中的问题类型
				email: '', //邮箱
				create_id: 0
			},
			feedbackCode: '', //验证码
			picName: '', //图片名字
			feedbackType: [], //用户反馈的类型
			// 验证码
			identifyCodes: '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz', //验证码字体的来源
			identifyCode: '' //显示出来的4个验证码
		};
	},
	created() {
		this.getOperation(); //操作手册
		this.getProblem(); //常见问题
		this.getProblemCount(); //常见问题总数
		this.getUserFeedback(); //用户反馈
		this.refreshCode(); //初始化验证码
	},
	mounted() {
		this.identifyCode = ''; //刷新的时候清空验证码
		this.makeCode(this.identifyCodes, 4); //随机生成4个字符的验证码
	},
	methods: {
		/**
		 * 菜单栏，点击子菜单事件
		 * @param {string} key 一级菜单索引
		 *  @param {Array} keyPath [一级菜单索引，二级菜单索引]
		 */
		selectMenu(key, keyPath) {
			this.memuActive = keyPath[0];
		},
		// 获取左侧导航栏:操作手册
		getOperation() {
			let success = res => {
				this.operationData = res.data.data;
				this.checkOperation(deep_clone(res.data.data[0])); //默认选中操作手册子菜单的第一项
			};
			this.$ajax({
				url: 'api/setting/operation_manual_data',
				method: 'get',
				params: {
					page_index: 1,
					page_size: 1000,
					status: 1
				},
				func: {
					success: success
				}
			});
		},
		//选中操作手册的子菜单
		checkOperation(item) {
			this.documentData = item;
		},
		//下载按钮
		downLoad(obj) {
			var form = document.createElement('form');
			form.action = this.BASE_URL + '/index/index/download_operation_test';
			form.method = 'post';
			form.style.display = 'none';
			var opt_id = document.createElement('textarea');
			opt_id.name = 'name';
			opt_id.value = obj.title;
			form.appendChild(opt_id);
			var opt_type = document.createElement('textarea');
			opt_type.name = 'path';
			opt_type.value = obj.path;
			// opt_type.value = obj.pdf_path;
			form.appendChild(opt_type);
			document.body.appendChild(form);
			form.submit();
			document.body.removeChild(form);
		},
		// 获取左侧导航栏:常见问题
		getProblem() {
			let success = res => {
				this.problemData = res.data;
				this.checkProblem(res.data[0].id)
			};
			this.$ajax({
				url: 'api/setting/problem_type',
				method: 'get',
				params: {},
				func: {
					success: success
				}
			});
		},
		// 获取常见问题总数
		getProblemCount() {
			let success = res => {
				this.problemCount = res.data.data_sum;
			};
			this.$ajax({
				url: 'api/setting/problem_data',
				method: 'get',
				params: {
					page_index: 1,
					page_size: 1000,
					type_id: 0
				},
				func: {
					success: success
				}
			});
		},
		//选中常见问题的子菜单
		checkProblem(id) {
			this.problemId = id;
			let success = res => {
				this.singleProblem = res.data.data;
				this.total_number = res.data.data_sum;
				this.total_number = res.data.data_sum;
				this.listFlag = false; //左侧常见问题切换不同的子菜单时，右侧默认显示常见问题搜索页
			};
			this.$ajax({
				url: 'api/setting/problem_data',
				method: 'get',
				params: {
					page_index: this.page_index,
					page_size: this.page_size,
					type_id: id,
					keyword: this.problem,
					status: 1
				},
				func: {
					success: success
				}
			});
		},
		// 搜索问题
		searchProblem() {
			this.checkProblem(this.problemId);
		},
		// 分页
		change_page(val) {
			this.page_index = val;
			this.checkProblem(this.problemId);
		},
		// 点击某个问题列表中的列
		clickProblemList(item) {
			this.listFlag = true;
			this.problemListData = item;
			this.addReadRecord(item.id);
		},
		//添加观看记录
		addReadRecord(id) {
			let success = res => {};
			this.$ajax({
				url: 'api/setting/add_helper_see',
				method: 'post',
				data: {
					id: id
				},
				func: {
					success: success
				}
			});
		},
		// 获取用户反馈
		getUserFeedback() {
			let success = res => {
				this.feedbackType = res.data;
			};
			this.$ajax({
				url: 'api/user/user_feedback_type',
				method: 'get',
				params: {},
				func: {
					success: success
				}
			});
		},
		//图片上传组件里返回的上传图片成功后的图片数据
		getImgPath(picture) {
			this.$message.success('已经上传照片');
			this.feedbackForm.picture = picture.file_path;
			this.picName = picture.file_name;
		},
		//反馈问题的表单提交
		submit() {
			if (this.feedbackForm.content == '') {
				this.$message.error('请输入您的问题内容');
				return;
			}
			if (this.feedbackForm.type_id == '') {
				this.$message.error('请选择问题类型');
				return;
			}
			if (this.feedbackForm.email == '') {
				this.$message.error('邮箱不能为空');
				return;
			} else {
				let mailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
				if (!mailReg.test(this.feedbackForm.email)) {
					this.$message.error('请输入正确的邮箱');
					return;
				}
			}
			if (this.feedbackCode == '') {
				this.$message.error('请输入验证码');
				return;
			}
			// toUpperCase() 方法用于把字符串转换为大写
			if (this.feedbackCode.toUpperCase() != this.identifyCode.toUpperCase()) {
				this.$message.error('验证码错误，请输入正确验证码');
				return;
			}
			let success = res => {
				this.picName = ''; //清空上传图片的名字
				this.feedbackCode = ''; //验证码框清空
				this.refreshCode(); //刷新验证码
				this.feedbackForm = deep_clone(this.defaultForm); //表单各项值重置为默认值
				this.$message.success('已经送反馈');
			};
			this.$ajax({
				url: 'api/user/user_feedback',
				method: 'post',
				data: this.feedbackForm,
				func: {
					success: success
				}
			});
		},
		//验证码
		// 随机数
		randomNum(min, max) {
			return Math.floor(Math.random() * (max - min) + min);
		},
		//看不清楚的时候，可以点击验证码框进行刷新
		refreshCode() {
			this.identifyCode = '';
			this.makeCode(this.identifyCodes, 4);
		},
		//生成验证码
		makeCode(o, l) {
			for (let i = 0; i < l; i++) {
				this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
			}
		}
	}
};
</script>
<style lang="scss">
.no-data-tips {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(100%, -50%);
	font-size: 12px;
	color: #ccc;
}
</style>
